import { useEffect, useState } from "react";
import { useRouter } from "next/router";
import css from "./index.module.scss";

interface menuType {
  name: string;
  is: number;
  path: string;
}

const Menu = () => {
  const router = useRouter();
  const pathname = router.pathname;
  const [list, setList] = useState<menuType[]>([
    {
      name: "首页",
      is: pathname === "/home" ? 1 : 0,
      path: "/home",
    },
    {
      name: "文章",
      is: pathname === "/article" ? 1 : 0,
      path: "/article",
    },
    {
      name: "关于",
      is: pathname === "/about" ? 1 : 0,
      path: "/about",
    },
    {
      name: "留言",
      is: pathname === "/mail" ? 1 : 0,
      path: "/mail",
    },
  ]);

  useEffect(() => {
    const updatedList = list.map((item) => ({
      ...item,
      is: pathname === item.path ? 1 : 0,
    }));
    setList(updatedList);
  }, [pathname]);

  return (
    <div className={css.menu}>
      {list.map((item) => {
        return (
          <div
            className={css.title}
            key={item.path}
            onClick={() => router.push(item.path)}
          >
            {item.name}
            <div
              className={css.circle}
              style={{ display: item.is === 1 ? "block" : "none" }}
            />
          </div>
        );
      })}
    </div>
  );
};

export default Menu;
